vue增删改查基础操作页面更新，基于axios的put，delete，get，put，以及对应的spring侧如何接收数据

2023-07-25 21:40| 来源: 网络整理| 查看: 265

get操作

get主要是用来获取数据

var self = this; axios.get('/systemconfig/financial/json') .then(function (response) { self.items = JSON.parse(response.data); }) .catch(function (error) { console.log(error); });

get操作比较简单，只要在网页上绑定好数据items，请求的内容自然会绑定到网页中，有一点一定要注意，就是在axios请求内容之后，不可以直接使用this更新数据了，要先设定好对象，引用this，然后给这个新对象附值就可以了。

然后后台也要用get接收

@RequestMapping(value = "/financial/json", method = RequestMethod.GET) public String toLoginPage( ) { }

注意要添加@RequestMapping的method属性。

这个比较简单，没什么看的。

post操作 axios.post('/systemconfig/financial', { configType: 1, configTypeName: this.SystemConfig.configTypeName, configTypeValue: "NULL", isStart: this.SystemConfig.isStart }).then(function (response) { console.log(response); // self.items = JSON.parse(response.data); data = JSON.parse(response.data); // 如果没有插入成功则放回 failuer 就不要执行了 if (data == "nohave") { humane.error("您没有输入正确的内容！"); return false; } else if (data == "failuer") { humane.error("插入失败，请检查您输入的数据！"); return false; } else { // 如果插入成功，则返回json，并添加到 items中。 console.log(data); self.items.push(data); self.closeAddDiv(); } }) .catch(function (error) { console.log(error); });

post操作是添加数据的，

跟get差不多，但是注意这个self.items.push(data)

要用这个添加数据

JAVA也比较简单，

@RequestMapping(value = "/financial", method = RequestMethod.POST) public String addSystemConfig(ModelAndView mv, @RequestBody SystemConfig systemConfig) {}

注意传入的参数都要是SystemConfig 的属性然后在前面加上@RequestBody注解，才可以，不然spring接收不到参数

delete操作 var self = this; axios({ method: 'delete', url: '/systemconfig/id/' + id, data: { "id": id, } }) .then(function (response) { data = response.data; if (data < 1) { // 删除失败 humane.error("删除失败，您的页面可能已经过期，请更新您的页面！"); return; } else { self.items.splice(index, 1); humane.success("操作成功！！！"); } }) .catch(function (response) { console.log(response); });

这个delete也很简单，

self.items.splice(index, 1);这个是关键 @RequestMapping(value = "/id/{urlId}", method = RequestMethod.DELETE) public int deleteSystemConfig(@PathVariable Integer urlId, @RequestBody SystemConfig systemConfig, HttpSession httpSession) {}

这上面的

@PathVariable 是获取id后面的那个动态id的。剩下的也很简单。 var self = this; axios({ method: 'put', url: '/systemconfig/id/' + self.selectSystemConfig.id, data: { "id": self.selectSystemConfig.id, "configTypeName": self.selectSystemConfig.configTypeName, "isStart": self.selectSystemConfig.isStart } }) .then(function (response) { data = response.data; if (data < 1) { // 删除失败 humane.error("修改失败，您的页面可能已经过期，请刷新您的页面！"); return; } else { alert(self.indexflag) self.condition.updatediv = true; self.$set(self.items[self.indexflag], "configTypeName", self.selectSystemConfig.configTypeName); self.$set(self.items[self.indexflag], "isStart", self.selectSystemConfig.isStart); // self.$forceUpdate(); humane.success("操作成功！！！"); } }) .catch(function (response) { console.log(response); });

这个跟上面的差不多。但是下面的是关键

然后是JAVA的。

@RequestMapping(value = "/id/{urlId}", method = RequestMethod.PUT) public int updateSystemConfig(@PathVariable Integer urlId, @RequestBody SystemConfig systemConfig, HttpSession httpSession) {}

不错。看着简单，但是这都是我一点点扣出来的，遇见了好多问题，搜了好多博客。

【本文地址】

公司简介

联系我们